<!--
 * @FilePath     : /study_code/html/input-radio.html
 * @Description  : label 标签和 css 选择器优化复选体验
 * @Date         : 2025-04-26 08:08:08
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-26 08:08:12
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <style>
      input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        outline: none;
        display: none;
      }

      label {
        width: 32px;
        height: 32px;
        display: inline-block;
        cursor: pointer;
      }

      label input[type="checkbox"] + span {
        width: 32px;
        height: 32px;
        display: inline-block;
        background: url("./images/checkbox@2x.png") no-repeat;
        background-position: 0 0;
      }

      label input[type="checkbox"]:checked + span {
        background-position: -32px 0;
      }
    </style>
  </head>
  <body>
    <label>
      <input type="checkbox" />
      <span></span>
    </label>
  </body>
</html>
